<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>同门科技产品筛选</title>
	<link rel="stylesheet" href="./public/css/search.css">
	<link rel="stylesheet" href="./public/css/common.css">

</head>

<body>
	<div id="header"></div>
	<div id="right"></div>
	<div class="search-container">
		<!-- 搜索框 -->
		<div class="search-input">
			<input type="text" id="searchKeyword" placeholder="请输入您想搜索的内容">
			<button class="search-button" id="searchButton">
				<i class="fi fi-search"></i>
				<span>搜索</span>
			</button>
		</div>

		<!-- 标签切换 -->
		<div class="tab-item">
			<button class="active" data-type="product">产品</button>
			<button data-type="news">新闻</button>
			<button data-type="download">下载</button>
		</div>

		<!-- 搜索结果列表 -->
		<div id="searchResults">
			<!-- 产品搜索结果 -->
			<div class="search-result" data-type="product">
				<a class="search-list" href="./product_id.html" target="_blank">
					<img class="image"
						src="http://img.tongmen.cdn.dgyunju.cn/1-1679297668.jpg?imageView2/0/format/webp/q/50/interlace/1"
						alt="产品1">
					<p class="title">产品1</p>
					<p class="description">这是产品1的描述内容，展示产品的特点和优势</p>
				</a>

				<a class="search-list" href="./product_id.html" target="_blank">
					<img class="image"
						src="http://img.tongmen.cdn.dgyunju.cn/1-1679297668.jpg?imageView2/0/format/webp/q/50/interlace/1"
						alt="产品2">
					<p class="title">产品2</p>
					<p class="description">这是产品2的描述内容，展示产品的特点和优势</p>
				</a>

				<!-- 分页 -->
			</div>

			<!-- 新闻搜索结果 (初始隐藏) -->
			<div class="search-result" data-type="news" style="display:none">
				<a class="search-list" href="./product_id.html" target="_blank">
					<img class="image"
						src="http://img.tongmen.cdn.dgyunju.cn/1-1679297668.jpg?imageView2/0/format/webp/q/50/interlace/1"
						alt="新闻1">
					<p class="title">新闻标题1</p>
					<p class="description">这是新闻1的描述内容，简要介绍新闻的主要内容</p>
				</a>
			</div>

			<!-- 下载搜索结果 (初始隐藏) -->
			<div class="search-result" data-type="download" style="display:none">
				<div class="empty">
					<img
						src=""
						alt="空状态">
					<p>暂无相关的搜索结果~</p>
				</div>
			</div>
		</div>
	</div>
	<div id="pagination" class="l-page"></div>


	<div id="footer"></div>


	<script src="./public/js/jquery.min.js"></script>
	<script src="./public/js/common.js"></script>
	<script src="./public/js/pagination.min.js"></script>
	<script src="./public/js/search.js"></script>
</body>

</html>